<template>
  <div>
    <headers>
    </headers>

    <!--  走马灯-->
    <el-carousel :interval="4000" type="card" height="350px" style="margin-top: 20px">
      <el-carousel-item v-for="item in imagebox" :key="item.id">
        <img :src="item.idView" class="image">
      </el-carousel-item>
    </el-carousel>








    <el-divider content-position="left">
      <div style="width: 200px;padding-left: 30px;font-weight: bold;color: dodgerblue">专题推荐</div>
    </el-divider>
    <!--全部专题标签-->
    <div>
      <el-breadcrumb >
        <el-dropdown-item icon="el-icon-d-arrow-right" style="max-width: 100px;margin-left:1100px">
          <router-link :to="{ name:'AllSubject'}" style="color: #333333;text-decoration:none" >全部专题</router-link>
        </el-dropdown-item>
      </el-breadcrumb>

    </div>


    <!--  专题模块 待补充-->
    <!--  <el-row>-->
    <!--    <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">-->
    <!--      <el-card>-->
    <!--        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">-->
    <!--        <div style="padding: 30px">-->
    <!--          <span>好吃的汉堡</span>-->
    <!--          <div class="bottom">-->
    <!--            <el-tag>标签一</el-tag>-->
    <!--            <el-tag>标签一</el-tag>-->
    <!--            <el-tag>标签一</el-tag>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </el-card>-->
    <!--    </el-col>-->
    <!--  </el-row>-->

    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="always" style="min-height:40px;max-width: 60%;margin-bottom: 20px;margin-top: 20px;margin-left: 50px">
          操作系统
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always" style="min-height:40px;max-width: 60%;margin-bottom: 20px;margin-top: 20px;margin-left:0px">
          计算机组成原理
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always" style="min-height:40px;max-width: 60%;margin-bottom: 20px;margin-top: 20px;margin-left: 0px">
          数据结构
        </el-card>
      </el-col>


      <el-col :span="8">
        <el-card shadow="always" style="min-height:40px;max-width: 60%;margin-bottom: 40px;margin-top: 20px;margin-left: 50px">
          操作系统
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always" style=" min-height:40px;max-width: 60%;margin-bottom: 40px;margin-top: 20px;margin-left: 0px">
          计算机组成原理
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always" style="min-height:40px;max-width: 60%;margin-bottom: 40px;margin-top: 20px;margin-left: 0px">
          数据结构
        </el-card>
      </el-col>

    </el-row>
    <!--推荐博客区域-->
    <el-divider content-position="left">
      <div style="width: 200px;padding-left: 30px;font-weight: bold;color: dodgerblue">博客推荐</div>
    </el-divider>
    <!--全部博客按钮-->


    <div>
      <el-breadcrumb >
        <el-dropdown-item icon="el-icon-d-arrow-right" style="max-width: 100px;margin-left:1100px">
          <router-link :to="{ name:'AllBlogs'}" style="color: #333333;text-decoration:none" >全部博客</router-link>
        </el-dropdown-item>
      </el-breadcrumb>

    </div>


    <div class="block">
      <el-timeline  >
        <!--      for循环用于展示所有推荐博客信息-->
        <!--      blogs为传递来的数据-->

        <el-timeline-item v-for="item in tabledata" :timestamp="item.editTime"  placement="top"  >
          <router-link :to="{name:'BlogDetail',query:{aid:item.aid}}" style="color: #333333;text-decoration: none" content="title" >
          <el-card >
            <h4>
               {{item.title}}

            </h4>
            <p title="summary" content="summary">{{item.summary}}</p>
            <el-tag style="margin-right : 5px;margin-bottom: 10px;float: right" content="upnumber" >点赞数：{{item.number}}</el-tag>

          </el-card>
          </router-link>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import headers from "@/components/headers";
import request from "@/utils/request";
const axios = require('axios');

export default {
  name: "Blogs",
  components:
      {
        headers
      }
  ,
  data(){
    return {
      //imagebox是assets下一个放图片的文件夹
      imagebox:
          [{id:0,idView:require('../assets/imagebox/1.jpg')},
            {id:1,idView:require('../assets/imagebox/1.jpg')},
            {id:2,idView:require('../assets/imagebox/1.jpg')},
          ],
      tabledata:[],

    }
  },
  created() {
    const _this=this
    axios.get('http://47.107.40.143:8080/getCommendArticle').then(function (resp){
      console.log('数组的长度为'+resp.data.data.length)
      for(let i = 0;i < resp.data.data.length;i++){
        _this.tabledata.push({
          aid: resp.data.data[i].aid,
          title: resp.data.data[i].title,
          summary:resp.data.data[i].summary,
          editTime:resp.data.data[i].editTime,
          number:resp.data.data[i].upnumber,
        })
        console.log(resp.data.data[i].aid)
      }
      console.log(resp)
    })












  },

  methods:
      {
      }
  ,
}
</script>

<style scoped>
.block
{
  max-width: 60%;
}
.lampblock
{
  margin: 0 auto;
  min-height: 350px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
